<template>
  <el-footer class="footer tg-c" height="48px">
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
      :total="total"
      layout="prev, pager, next"
      background
    />
  </el-footer>
</template>

<script>
export default {
  props: {
    form: {},
    // total
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageNum: 0, // 页码
      pageSize: 10, // 每页条数
    };
  },
  watch: {
    "form.pageNum"(oldValue) {
      this.pageNum = oldValue;
    },
  },
  created() {
    const { pageNum, pageSize } = this.form;
    if (pageNum && pageSize) {
      this.pageNum = pageNum;
      this.pageSize = pageSize;
    }
  },
  methods: {
    // page改变时
    currentChange(pageNum) {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pageNum = pageNum;
      this.$emit("update:form", form);
      this.$emit("getList", { ...form, pageNum: pageNum - 1 });
    },
    // size改变时
    sizeChange(pageSize) {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pageSize = pageSize;
      this.$emit("update:form", form);
      this.$emit("getList", form);
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  padding: 10px !important;
  background-color: $white;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background-color: $f9fafb;
  }

  .el-pagination {
    padding: 0;
  }
}
</style>
